<template>
  <!-- 格式化 -->
  <div class="p-5 mt-5 artboard artboard-demo flex items-start bg-primary-100">
    <div class="">
      <label class="relative inline-flex items-center cursor-pointer">
        <input
          type="checkbox"
          v-model="isFormatter"
          @input="handleFormatter"
          class="sr-only peer"
        />
        <div
          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
        ></div>
        <span class="ms-3 text-sm font-medium text-gray-700 dark:text-gray-600"
          ><LightBulbIcon class="h-4 w-4 inline-block" /> 格式化</span
        >
      </label>
    </div>
  </div>
  <!-- 十进制-->
  <div class="relative mt-6 rounded-md shadow-sm">
    <div
      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
    >
      <span class="text-gray-500 sm:text-sm dark:text-gray-200">十进制</span>
    </div>
    <input
      type="text"
      v-model="decValue"
      @input="handleDecInput"
      class="block w-full rounded-md border-0 py-1.5 pl-20 pr-20 text-gray-900 ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-primary-500 focus:outline-none sm:text-sm sm:leading-6 dark:text-gray-200"
    />
  </div>
  <!-- 二进制 -->
  <div class="relative mt-6 rounded-md shadow-sm">
    <div
      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
    >
      <span class="text-gray-500 sm:text-sm dark:text-gray-200">二进制</span>
    </div>
    <input
      type="text"
      v-model="binValue"
      @input="handleBinInput"
      class="block w-full rounded-md border-0 py-1.5 pl-20 pr-20 text-gray-900 ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-primary-500 focus:outline-none sm:text-sm sm:leading-6 dark:text-gray-200"
    />
  </div>
  <!-- 八进制 -->
  <div class="relative mt-6 rounded-md shadow-sm">
    <div
      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
    >
      <span class="text-gray-500 sm:text-sm dark:text-gray-200">八进制</span>
    </div>
    <input
      type="text"
      v-model="octValue"
      @input="handleOctInput"
      class="block w-full rounded-md border-0 py-1.5 pl-20 pr-20 text-gray-900 ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-primary-500 focus:outline-none sm:text-sm sm:leading-6 dark:text-gray-200"
    />
  </div>
  <!-- 十六进制 -->
  <div class="relative mt-6 rounded-md shadow-sm">
    <div
      class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
    >
      <span class="text-gray-500 sm:text-sm dark:text-gray-200">十六进制</span>
    </div>
    <input
      type="text"
      v-model="hexValue"
      @input="handleHexInput"
      class="uppercase block w-full rounded-md border-0 py-1.5 pl-20 pr-20 text-gray-900 ring-1 ring-inset ring-gray-200 focus:ring-2 focus:ring-primary-500 focus:outline-none sm:text-sm sm:leading-6 dark:text-gray-200"
    />
  </div>
</template>

<script setup lang="ts">
import { LightBulbIcon } from "@heroicons/vue/24/outline";
import { ref } from "vue";
// 是否格式化
const isFormatter = ref(true);

// 二进制
const binValue = ref("");
const handleBinInput = () => {
  binValue.value = binValue.value.replace(/[^01]/g, "");
  if (isFormatter.value) {
    decValue.value = replaceSpace3(parseInt(binValue.value, 2).toString());
    octValue.value = replaceSpace3(parseInt(binValue.value, 2).toString(8));
    hexValue.value = replaceSpace3(
      parseInt(binValue.value, 2).toString(16).toUpperCase()
    );
    // 每隔三位添加一个空格
    binValue.value = replaceSpace3(binValue.value);
  } else {
    decValue.value = parseInt(binValue.value, 2).toString();
    octValue.value = parseInt(binValue.value, 2).toString(8);
    hexValue.value = parseInt(binValue.value, 2).toString(16).toUpperCase();
  }
};
// 十进制
const decValue = ref("");
const handleDecInput = () => {
  decValue.value = decValue.value.replace(/[^0-9]/g, "");
  if (isFormatter.value) {
    binValue.value = replaceSpace3(parseInt(decValue.value, 10).toString(2));
    octValue.value = replaceSpace3(parseInt(decValue.value).toString(8));
    hexValue.value = replaceSpace3(
      parseInt(decValue.value).toString(16).toUpperCase()
    );

    // 每隔三位添加一个空格
    decValue.value = replaceSpace3(decValue.value);
  } else {
    binValue.value = parseInt(decValue.value, 10).toString(2);
    octValue.value = parseInt(decValue.value).toString(8);
    hexValue.value = parseInt(decValue.value).toString(16).toUpperCase();
  }
};
// 八进制
const octValue = ref("");
const handleOctInput = () => {
  octValue.value = octValue.value.replace(/[^0-7]/g, "");
  if (isFormatter.value) {
    binValue.value = replaceSpace3(parseInt(octValue.value, 8).toString(2));
    decValue.value = replaceSpace3(parseInt(octValue.value, 8).toString());
    hexValue.value = replaceSpace3(
      parseInt(octValue.value, 8).toString(16).toUpperCase()
    );

    // 每隔三位添加一个空格
    octValue.value = replaceSpace3(octValue.value);
  }
};
// 十六进制
const hexValue = ref("");
const handleHexInput = () => {
  hexValue.value = hexValue.value.replace(/[^0-9a-fA-F]/g, "");
  if (isFormatter.value) {
    binValue.value = replaceSpace3(parseInt(hexValue.value, 16).toString(2));
    decValue.value = replaceSpace3(parseInt(hexValue.value, 16).toString());
    octValue.value = replaceSpace3(parseInt(hexValue.value, 16).toString(8));
    // 每隔三位添加一个空格
    hexValue.value = replaceSpace3(hexValue.value);
  } else {
    binValue.value = parseInt(hexValue.value, 16).toString(2);
    decValue.value = parseInt(hexValue.value, 16).toString();
    octValue.value = parseInt(hexValue.value, 16).toString(8);
  }
};

// 格式化
const handleFormatter = () => {
  if (isFormatter.value) {
    // 去掉每隔三位的空格
    binValue.value = replaceSpace(binValue.value);
    octValue.value = replaceSpace(octValue.value);
    decValue.value = replaceSpace(decValue.value);
    hexValue.value = replaceSpace(hexValue.value);
  } else {
    // 每隔三位添加一个空格
    binValue.value = replaceSpace3(binValue.value);
    octValue.value = replaceSpace3(octValue.value);
    decValue.value = replaceSpace3(decValue.value);
    hexValue.value = replaceSpace3(hexValue.value);
  }
};
/**
 * 每隔3位添加一个空格
 * @param str
 * @returns
 */
function replaceSpace3(str: string) {
  return str.replace(/(.{3})/g, "$1 ").trim();
}
/**
 * 替换空格
 * @param str 替换空格
 * @returns
 */
function replaceSpace(str: string) {
  return str.replace(/\s/g, "").trim();
}
</script>

<style scoped></style>
